<template>
    <div>
        <h2>网友评价</h2>
        <div class="comment-box-list">
            <div class="comment-detail" v-for="(comment,index) in comment_list" :key="comment.username">
                <p>
                    <span class="username">{{comment.username}}</span>
                    <span class="user-tag">{{index+1}}楼</span>
                </p>
                <p v-html="comment.content"></p>
                <div class="comment-info">
                    <p><span>时间:{{comment.comment_time}}</span></p>
                </div>
            </div>
        </div>

        <div id="editor">
            <p>
            <h3>请留下您的影评...</h3></p>
            <div ref="editor" style="text-align:left"></div>
            <button id="button1" v-on:click="getContent">提交</button>
        </div>


    </div>
</template>

<script>
    import E from 'wangeditor'
    import Login from "./Login";

    export default {
        name: 'Editor',
        components: {
            Login
        },
        data() {
            return {
                editorContent: '',
                comment_list: [],
                detail_id: 0
            }
        },
        created() {
            this.get_detail_id()
            this.get_comments()
        },
        methods: {
            getContent: function () {
                this.$axios.post(`${this.$settings.base_url}/yingshi/comment/`, {
                    username: this.$cookies.get('username'),
                    content: this.editorContent,
                    movie_title: this.detail_id,
                }).then(response => {
                    console.log('新生成的评论:', response.data);
                    this.editor.txt.clear()
                    this.comment_list.push(response.data)

                }).catch(error => {
                })
            },
            get_detail_id() {
                this.detail_id = this.$route.params.pk
            },
            get_comments() {
                this.$axios.get(`${this.$settings.base_url}/yingshi/comment/?movie_title=${this.detail_id}`).then(response => {
                    this.comment_list = response.data;
                }).catch(error => {
                })
            }
        },
        mounted() {
            this.editor = new E(this.$refs.editor)
            this.editor.customConfig.onchange = (html) => {
                this.editorContent = html
            }
            this.editor.create()
            if (this.$cookies.get('username')) {
                this.editor.$textElem.attr('contenteditable', true)
            } else {
                this.editor.$textElem.attr('contenteditable', false)
                this.editor.txt.append('<h6>登录后再进行评论</h6>>')
            }
            this.editor.$textContainerElem.css('height', '200px !important'); //设置高度
        }
    }
</script>

<style scoped>

    #button1 {
        margin-top: 20px;
        float: right;
    }

    #editor {
        margin-bottom: 100px;
    }

    .comment-box-list {
        margin-top: 0;
        margin-bottom: 0;
        text-align: left;
    }

    .comment-box-list p {
        display: block;
        margin-bottom: 14px;
    }

    .comment-detail {
        padding-top: 10px;
    }

    .comment-detail p {
        color: brown;
    }

    .comment-detail p .user-tag {
        margin-left: 10px;
        font-size: 14px;
        color: #999999;
    }

    .comment-detail p .username {
        font-size: 14px;
        color: darkgoldenrod;
    }

    .comment-detail div p {
        text-align: left;
        font-size: 12px;

        color: #aaaaaa;
        border-color: #999999;
        border-bottom: solid 1px;
        padding-bottom: 8px;
    }

    .comment-detail div p span {
        margin-bottom: 10px;
    }
</style>
